<template>
  <div>
    <h1>app组件</h1>
    <span>I'm parent:{{ msg }}</span>
    <button @click="msg++">msg++</button>
    <div>{{ first + second + last }}</div>
    <!-- 组件v-model:实现组件双向绑定 -->
    <childCom
      v-model="msg"
      v-model:first-name="first"
      v-model:second-name="second"
      v-model:last-name="last"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import childCom from "./commponets/childCom.vue";

const msg = ref(100);
const first = ref("周11");
const second = ref("志22");
const last = ref("超33");
</script>

<style lang="scss" scoped>
</style>